<template>
  <BgDrawer :drawer="drawer" @close="close">
    <MyTitle title="设备绩效监控"></MyTitle>
    <div class="flex-x" style="height: 40%">
      <State style="width: 50%; height: 100%; margin-right: 20px"></State>
      <Time style="width: 50%; height: 100%"></Time>
    </div>
    <div class="flex-x" style="height: 30%">
      <Utilization
        style="width: 50%; height: 100%; margin-right: 20px"
      ></Utilization>
      <CompletionRate style="width: 50%; height: 100%"></CompletionRate>
    </div>
    <div class="flex-x" style="height: 20%">
      <Task style="width: 50%; height: 100%; margin-right: 20px"></Task>
      <Warning style="width: 50%; height: 100%"></Warning>
    </div>
  </BgDrawer>
</template>

<script>
import State from "./monitorComponents/State.vue";
import Utilization from "./monitorComponents/Utilization.vue";
import Time from "./monitorComponents/Time.vue";
import CompletionRate from "./monitorComponents/CompletionRate.vue";
import Warning from "./monitorComponents/Warning.vue";
import Task from "./monitorComponents/Task.vue";
import BgDrawer from "./BgDrawer.vue";
import MyTitle from "./DTitle.vue";
export default {
  components: {
    MyTitle,
    BgDrawer,
    State,
    Time,
    Utilization,
    CompletionRate,
    Warning,
    Task,
  },
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeName: "工艺参数监控",
    };
  },
  methods: {
    close() {
      this.$emit("update:drawer", false);
    },
    handleClick() {},
  },
};
</script>

<style lang="scss" scoped>
</style>